<ng-container *ngIf="userQuery.data() as authUser">
  <cnsl-refresh-table
    *ngIf="type$ | async as type"
    [loading]="loading()"
    (refreshed)="refresh$.next(true)"
    [hideRefresh]="true"
    [timestamp]="(users$ | async)?.details?.timestamp"
    [selection]="selection"
    [showBorder]="true"
  >
    <div leftActions class="user-toggle-group">
      <cnsl-nav-toggle
        label="{{ 'DESCRIPTIONS.USERS.HUMANS.TITLE' | translate }}"
        (clicked)="setType(Type.HUMAN)"
        [active]="type === Type.HUMAN"
        data-e2e="list-humans"
      ></cnsl-nav-toggle>
      <cnsl-nav-toggle
        label="{{ 'DESCRIPTIONS.USERS.MACHINES.TITLE' | translate }}"
        (clicked)="setType(Type.MACHINE)"
        [active]="type === Type.MACHINE"
        data-e2e="list-machines"
      ></cnsl-nav-toggle>
    </div>
    <p class="user-sub cnsl-secondary-text">
      {{
        (type === Type.HUMAN ? 'DESCRIPTIONS.USERS.HUMANS.DESCRIPTION' : 'DESCRIPTIONS.USERS.MACHINES.DESCRIPTION')
          | translate
      }}
    </p>
    <ng-template cnslHasRole [hasRole]="['user.write']" actions>
      <button
        (click)="deactivateSelectedUsers()"
        class="bg-state inactive"
        mat-raised-button
        *ngIf="selection.hasValue() && multipleDeactivatePossible"
        [disabled]="(canWrite$ | async) === false"
        color="primary"
      >
        <div class="cnsl-action-button">
          <span class="">{{ 'USER.TABLE.DEACTIVATE' | translate }}</span>
          <cnsl-action-keys (actionTriggered)="deactivateSelectedUsers()" [type]="ActionKeysType.DEACTIVATE">
          </cnsl-action-keys>
        </div>
      </button>
      <button
        (click)="reactivateSelectedUsers()"
        class="bg-state active margin-left"
        mat-raised-button
        *ngIf="selection.hasValue() && multipleActivatePossible"
        [disabled]="(canWrite$ | async) === false"
        color="primary"
      >
        <div class="cnsl-action-button">
          <span class="">{{ 'USER.TABLE.ACTIVATE' | translate }}</span>
          <cnsl-action-keys (actionTriggered)="reactivateSelectedUsers()" [type]="ActionKeysType.REACTIVATE">
          </cnsl-action-keys>
        </div>
      </button>
    </ng-template>
    <cnsl-filter-user
      actions
      *ngIf="!selection.hasValue()"
      (filterChanged)="searchQueries$.next($any($event))"
      (filterOpen)="filterOpen = $event"
    ></cnsl-filter-user>
    <ng-template cnslHasRole [hasRole]="['user.write']" actions>
      <button
        (click)="router.navigate(['/users', type === Type.HUMAN ? 'create' : 'create-machine'])"
        color="primary"
        mat-raised-button
        [disabled]="(canWrite$ | async) === false"
        *ngIf="!selection.hasValue()"
        data-e2e="create-user-button"
      >
        <div class="cnsl-action-button">
          <mat-icon class="icon">add</mat-icon>
          <span>{{ 'ACTIONS.NEW' | translate }}</span>
          <cnsl-action-keys
            *ngIf="!filterOpen"
            (actionTriggered)="router.navigate(['/users', type === Type.HUMAN ? 'create' : 'create-machine'])"
          >
          </cnsl-action-keys>
        </div>
      </button>
    </ng-template>

    <div class="table-wrapper">
      <table class="table" mat-table [dataSource]="dataSource" matSort>
        <ng-container matColumnDef="select">
          <th mat-header-cell *matHeaderCellDef>
            <div class="selection">
              <mat-checkbox
                class="checkbox"
                [disabled]="(canWrite$ | async) === false"
                color="primary"
                (change)="$event ? masterToggle() : null"
                [checked]="selection.hasValue() && isAllSelected()"
                [indeterminate]="selection.hasValue() && !isAllSelected()"
              >
                <cnsl-avatar class="hidden" [isMachine]="true">
                  <i class="las la-robot"></i>
                </cnsl-avatar>
              </mat-checkbox>
            </div>
          </th>
          <td mat-cell *matCellDef="let user">
            <div class="selection">
              <mat-checkbox
                class="checkbox"
                [disabled]="(canWrite$ | async) === false"
                color="primary"
                (click)="$event.stopPropagation()"
                (change)="$event ? selection.toggle(user) : null"
                [checked]="selection.isSelected(user)"
              >
                <cnsl-avatar
                  *ngIf="user.type.case === 'human' && user.type.value.profile; else cog"
                  class="avatar"
                  [name]="user.type.value.profile.displayName"
                  [avatarUrl]="user.type.value.profile.avatarUrl || ''"
                  [forColor]="user.preferredLoginName"
                  [size]="32"
                >
                </cnsl-avatar>
                <ng-template #cog>
                  <cnsl-avatar [forColor]="user?.preferredLoginName" [isMachine]="true">
                    <i class="las la-robot"></i>
                  </cnsl-avatar>
                </ng-template>
              </mat-checkbox>
            </div>
          </td>
        </ng-container>

        <ng-container matColumnDef="displayName">
          <th mat-header-cell *matHeaderCellDef mat-sort-header>
            {{ 'USER.PROFILE.DISPLAYNAME' | translate }}
          </th>
          <td mat-cell *matCellDef="let user" [routerLink]="user.userId ? ['/users', user.userId] : null">
            <span *ngIf="user.type.case === 'human'">{{ user.type.value?.profile?.displayName }}</span>
            <span *ngIf="user.type.case === 'machine'">{{ user.type.value.name }}</span>
          </td>
        </ng-container>

        <ng-container matColumnDef="preferredLoginName">
          <th mat-header-cell *matHeaderCellDef mat-sort-header>
            {{ 'USER.PROFILE.PREFERREDLOGINNAME' | translate }}
          </th>
          <td mat-cell *matCellDef="let user" [routerLink]="user.userId ? ['/users', user.userId] : null">
            <span *ngIf="user.type.case === 'human'">{{ user.preferredLoginName }}</span>
          </td>
        </ng-container>

        <ng-container matColumnDef="username">
          <th mat-header-cell *matHeaderCellDef mat-sort-header>
            {{ 'USER.PROFILE.USERNAME' | translate }}
          </th>
          <td mat-cell *matCellDef="let user" [routerLink]="user.userId ? ['/users', user.userId] : null">
            {{ user.username }}
          </td>
        </ng-container>

        <ng-container matColumnDef="email">
          <th mat-header-cell *matHeaderCellDef mat-sort-header>
            {{ 'USER.EMAIL' | translate }}
          </th>
          <td mat-cell *matCellDef="let user" [routerLink]="user.userId ? ['/users', user.userId] : null">
            <span *ngIf="user.type?.value?.email?.email">{{ user.type.value.email.email }}</span>
          </td>
        </ng-container>

        <ng-container matColumnDef="state">
          <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'USER.DATA.STATE' | translate }}</th>
          <td mat-cell *matCellDef="let user" [routerLink]="user.userId ? ['/users', user.userId] : null">
            <span
              class="state"
              [ngClass]="{
                active: user.state === UserState.ACTIVE,
                inactive: user.state === UserState.INACTIVE,
              }"
            >
              {{ 'USER.STATEV2.' + user.state | translate }}
            </span>
          </td>
        </ng-container>

        <ng-container matColumnDef="creationDate">
          <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'USER.TABLE.CREATIONDATE' | translate }}</th>
          <td mat-cell *matCellDef="let user" [routerLink]="user.userId ? ['/users', user.userId] : null">
            <span class="no-break">{{ user.details.creationDate | timestampToDate | localizedDate: 'regular' }}</span>
          </td>
        </ng-container>

        <ng-container matColumnDef="changeDate">
          <th mat-header-cell *matHeaderCellDef>{{ 'USER.TABLE.CHANGEDATE' | translate }}</th>
          <td mat-cell *matCellDef="let user" [routerLink]="user.userId ? ['/users', user.userId] : null">
            <span class="no-break">{{ user.details.changeDate | timestampToDate | localizedDate: 'regular' }}</span>
          </td>
        </ng-container>

        <ng-container matColumnDef="actions" stickyEnd>
          <th mat-header-cell *matHeaderCellDef class="user-tr-actions"></th>
          <td mat-cell *matCellDef="let user" class="user-tr-actions">
            <cnsl-table-actions>
              <button
                actions
                matTooltip="{{ 'ACTIONS.REMOVE' | translate }}"
                color="warn"
                (click)="deleteUser(user, authUser)"
                [disabled]="(canWrite$ | async) === false || (canDelete$ | async) === false"
                [attr.data-e2e]="
                  (canWrite$ | async) === false || (canDelete$ | async) === false
                    ? 'disabled-delete-button'
                    : 'enabled-delete-button'
                "
                mat-icon-button
              >
                <i class="las la-trash"></i>
              </button>
            </cnsl-table-actions>
          </td>
        </ng-container>

        <tr mat-header-row *matHeaderRowDef="type === Type.HUMAN ? displayedColumnsHuman : displayedColumnsMachine"></tr>
        <tr
          class="highlight pointer"
          mat-row
          *matRowDef="let user; columns: type === Type.HUMAN ? displayedColumnsHuman : displayedColumnsMachine"
        ></tr>
      </table>
    </div>

    <div *ngIf="!loading() && !dataSource?.data?.length" class="no-content-row">
      <i class="las la-exclamation"></i>
      <span>{{ 'USER.TABLE.EMPTY' | translate }}</span>
    </div>
    <cnsl-paginator
      class="paginator"
      [length]="dataSize()"
      [pageSize]="INITIAL_PAGE_SIZE"
      [timestamp]="(users$ | async)?.details?.timestamp"
      [pageSizeOptions]="[10, 20, 50, 100]"
    ></cnsl-paginator>
    <!--    (page)="changePage($event)"-->
  </cnsl-refresh-table>
</ng-container>
